<template>
    <view class="login-container">
        <view class="card">
                <u-button :custom-style="loginStyle" @click="test">登录</u-button>
                <u-button type="success" :custom-style="registerStyle" @click="toRegister">注册</u-button>
        </view>
    </view>
</template>
<script setup>
    import {
        reactive
    } from 'vue';
    const loginModel = reactive({
        username: '',
        password: ''
    })
    const loginStyle = reactive({
        marginTop: '20px',
        background: '#4ec3e6',
        color: '#FFF',
        width: '100%'
    })
    const registerStyle = reactive({
        marginTop: '15px',
        color: '#FFF',
        width: '100%'
    })

    const toRegister = () =>{
        uni.navigateTo({
            url:'../register/register'
        })
    }
	const test = () =>{
	    uni.navigateTo({
	        url:'../login/login'
	    })
	}
	
	
</script>

<style lang="scss" scoped>
    .login-container {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
		background-image: url('https://s1.aigei.com/src/img/gif/85/853f6e72806d431f8b13976cd581ebae.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:0uUquQ5SEddcYlVjCl-Irsur_PY=');
    }

    .card {
        background-color: rgba(255, 255, 255, 0.9); /* 卡片背景为半透明白色 */
        border-radius: 8px; /* 圆角 */
        padding: 20px; /* 内边距 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        width: 300px; /* 卡片宽度 */
		background-image: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.eY9inTJjNYQO6Hl7urXf3wHaEo?w=248&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'); /* 背景图 */
		background-size: cover; /* 背景图覆盖 */
		background-position: center; /* 背景图居中 */
    }

    .forms {
        width: 100%;
    }

    .passtext {
        display: flex;
        justify-content: flex-end;
        color: #ffffff;
        margin-top: 10px; /* 调整间距 */
    }
</style>
